This tutorial shows you how to use Dreamweaver to define a local site and to create and edit Web documents. Use this tutorial to learn the basic skills you'll need to develop a Web site and to learn about some of the new features of Dreamweaver 3.
In this tutorial, you will create a Web site for a fictitious company, Scaal Coffee, a gourmet coffee business.
While visiting Scaal's Web site, customers can read about the company, view the weekly specials, and browse through the product pages of Scaal's online catalog.
Along the way, you'll learn how to perform the following tasks:
|
Define a local site |
|
Create a document |
|
Use layers to lay out a page |
|
Convert layers to tables |
|
Attach a behavior to an image |
|
Import a Microsoft Word HTML document |
|
Format text using HTML styles |
|
Create a site map |
|
Create links |
|
Apply a template |
|
Create a jump menu |
If you don't have a printed version of Using Dreamweaver, you may find it easier to follow the tutorial if you print the pages from your browser. You can also download a printable version from the Macromedia Web site.
Note: This tutorial demonstrates some features that are supported only in 4.0 or later browsers.
Take a guided tour of Dreamweaver
Before you get started, watch the Guided Tour movies to familiarize yourself with Dreamweaver's features.
Click here to view Dreamweaver's Guided Tour.
Preview the completed Web site
Next, view the completed Web site to get an idea of what you'll be working toward.
| 1 | Launch Dreamweaver. |
| 2 | In Dreamweaver, choose File > Open. In the file browsing dialog box, navigate to the Dreamweaver application folder, open the Tutorial folder, and then the Scaal_site folder. |
| 3 | In the Scaal_site folder, select scaal_home.html, and then click Open to open the Scaal home page in the Document window. |
| Do not edit this page. You will create your own version of this page. | |
| 4 | Choose File > Preview in Browser and select a browser with which to view the Scaal home page. (Use a 4.0 browser to view this site.)
|
| 5 | Move the pointer over the three items on the left side of the page (Our Story, Products, and This Week), and notice that the items highlight to indicate that they are active links. |
| Click the links to explore the site. To return to the home page, click the Scaal logo, which is located at the top of each site page. | |
| 6 | Close the browser when you finish looking at the site. |
| 7 | Close Dreamweaver. |
 |
How the tutorial files are arranged
Both the completed and partially completed HTML files used in this tutorial are in the Scaal_site folder in the Tutorial folder. Images and other associated files for the site are in folders below the Scaal_site folder. (The complete path to the Scaal_site folder will vary, depending on where you have Dreamweaver 3.0 installed.)
Each file has a meaningful name—for example, the HTML file for the completed Scaal products page is named products_index.html. The partially completed files—which you'll be working on—have names similar to their counterparts in the complete site, except they begin with DW3_; the partially completed version of products_index.html, for example, is called DW3_products_index.html.